<template>
  <Row>
    <Table border :columns="columns6" :data="data5">
    </Table>
    <Button type="primary" @click="modal6 = true">添加摄像头</Button>
    <Modal
      v-model="modal6"
      title="添加摄像头"
      :loading="loading"
      @on-ok="asyncOK('formItem')">
      <Form ref="formItem" :model="formItem" :rules="ruleValid" :label-width="80">
        <FormItem label="摄像头IP" prop="ip">
          <Input v-model="formItem.ip" placeholder="请输入ip地址"></Input>
        </FormItem>
        <FormItem label="端口" prop="port">
          <Input v-model="formItem.port" placeholder="输入端口"></Input>
        </FormItem>
        <FormItem label="位置" prop="addr" >
            <Input v-model="formItem.addr" placeholder="摄像头位置（不要重复）"></Input>
        </FormItem>
        <FormItem label="管理账号" prop='username'>
          <Input v-model="formItem.username" placeholder="管理员账号"></Input>
        </FormItem>
        <FormItem label="管理密码" prop="password">
          <Input type="password" v-model="formItem.password" placeholder="管理员密码"></Input>
        </FormItem>
      </Form>
    </Modal>
    <Modal
      v-model="modal7"
      title="修改摄像头信息"
      :loading="loading2"
      @on-ok="asyncOK2('formItem2')">
      <Form ref="formItem2" :model="formItem2" :rules="ruleValid2" :label-width="80">
        <FormItem label="摄像头ID" prop="id">
          <Input v-model="formItem2.id" placeholder="请输入id地址" disabled ></Input>
        </FormItem>
        <FormItem label="摄像头IP" prop="ip">
          <Input v-model="formItem2.ip" placeholder="请输入ip地址"></Input>
        </FormItem>
        <FormItem label="端口" prop="port">
          <Input v-model="formItem2.port" placeholder="输入端口"></Input>
        </FormItem>
        <FormItem label="位置" prop="addr" >
          <Input v-model="formItem2.addr" placeholder="摄像头位置（不要重复）"></Input>
        </FormItem>
        <FormItem label="管理账号" prop='username'>
          <Input v-model="formItem2.username" placeholder="管理员账号"></Input>
        </FormItem>
        <FormItem label="管理密码" prop="password">
          <Input type="password" v-model="formItem2.password" placeholder="管理员密码"></Input>
        </FormItem>
      </Form>
    </Modal>
  </Row>
</template>
<script>
export default {
  data () {
    return {
      editIndex: -1,  // 当前聚焦的输入框的行数
      columns6: [
        {
          title: '#',
          type: 'index'
        },
        {
          title: 'IP',
          key: 'ip'
        },
        {
          title: '端口',
          key: 'port'
        },
        {
          title: '位置',
          key: 'addr'
        },
        {
          title: '操作',
          key: 'action',
          width: 200,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.show(params.index)
                  }
                }
              }, '查看'),
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px',
                  marginBottom: '3px'
                },
                on: {
                  click: () => {
                    this.edit(params.row);
                  }
                }
              }, '修改'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.remove(params.index)
                  }
                }
              }, '删除')
            ])
          }
        }
      ],
      data5: [],
      modal6: false,
      loading: true,
      modal7: false,
      loading2: true,
      formItem: {
        ip: '',
        port: '',
        addr: '',
        username: '',
        password: ''
      },
      formItem2: {
        id:'',
        ip: '',
        port: '',
        addr: '',
        username: '',
        password: ''
      },
      ruleValid: {
        ip: [
          { required: true, message: 'ip不能为空', trigger: 'blur' },
          { type: 'string', pattern: /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/, message: '请输入正确ip地址', trigger: 'blur' }
        ],
        port: [
          { required: true, message: '端口不能为空', trigger: 'blur' },
          { type: 'string', pattern: /^\d+$/, message: '请输入正确端口', trigger: 'blur' }
        ],
        addr: [
          { required: true, message: '地址不能为空', trigger: 'blur' },
          { type: 'string', min: 2, message: '不能少于2个字符', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { type: 'string', min: 2, message: '不能少于2个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { type: 'string', min: 6, message: '不能少于6个字符', trigger: 'blur' }
        ]
      },
      ruleValid2: {
        ip: [
          { required: true, message: 'ip不能为空', trigger: 'blur' },
          { type: 'string', pattern: /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/, message: '请输入正确ip地址', trigger: 'blur' }
        ],
        port: [
          { required: true, message: '端口不能为空', trigger: 'blur' },
          { type: 'string', pattern: /^\d+$/, message: '请输入正确端口', trigger: 'blur' }
        ],
        addr: [
          { required: true, message: '地址不能为空', trigger: 'blur' },
          { type: 'string', min: 2, message: '不能少于2个字符', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { type: 'string', min: 2, message: '不能少于2个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { type: 'string', min: 6, message: '不能少于6个字符', trigger: 'blur' }
        ]
      },
      model_flag: false,
      model_flag2: false,
    }
  },
  mounted () {
    this.$axios.get('/api/camera/').then((response) => {
      if (response.data.success) {
        this.data5 = response.data.data
      }
    }).catch((response) => {
      console.log(response)
    })
  },
  methods: {
    edit(row){
      this.modal7 = true;
      this.formItem2.id = row.id
      this.formItem2.ip = row.ip
      this.formItem2.port = row.port+""
      this.formItem2.addr = row.addr
      this.formItem2.username = row.username
      this.formItem2.password = row.password
      console.log(this.formItem2)
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('新增成功')
        } else {
          this.$Message.error('新增失败')
        }
        this.model_flag = valid
      })
    },
    handleSubmit2 (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('修改成功')
        } else {
          this.$Message.error('修改失败')
        }
        this.model_flag2 = valid
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    show (index) {
      this.$Modal.info({
        title: '分组信息',
        content: `ID：${this.data5[index].id}<br>IP：${this.data5[index].ip}<br>端口：${this.data5[index].port}<br>位置：${this.data5[index].addr}<br>管理账号：${this.data5[index].username}`
      })
    },
    remove (index) {
      let del_data = this.data5[index]
      this.$axios.get('/api/camera/' + del_data.id + '/delete').then((response) => {
        if (response.data.success) {
          this.data5.splice(index, 1)
        }
      }).catch((response) => {
        console.log(response)
      })
    },
    asyncOK2(name){
      this.handleSubmit2(name)
      if (this.model_flag2) {
        this.loading2 = true
        let post_data = this.formItem2

        this.$axios.put('/api/camera/', this.qs.stringify(post_data)).then((response) => {
          console.log(response)
          if (response.data.success) {
            console.log("修改成功")
          }
        }).catch((response) => {
          console.log(response)
        })
        setTimeout(() => {
          this.modal7 = false
        }, 1000)
      }
    },
    asyncOK (name) {
      this.handleSubmit(name)
      if (this.model_flag) {
        this.loading = true
        let post_data = this.formItem
        this.$axios.post('/api/camera/', this.qs.stringify(post_data)).then((response) => {
          if (response.data.success) {
            this.data5.push(response.data.data)
          }
        }).catch((response) => {
          console.log(response)
        })
        setTimeout(() => {
          this.modal6 = false
        }, 2000)
      }
    }
  }
}
</script>
